<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        axios 是一个 基于 Promise 的ajax库，底层还是ajax请求，只是把ajax请求封装成一个 Promise 版本（ajax请求是异步的。）

    </p>
    <button id="btn">点击发送请求</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    // 生成一个ajax请求函数
    // 自己封装了一个 Promise版本的ajax请求
    function ajax1(url) {
        return new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.onreadystatechange = function () {
                // 1 - 2 - 3 - 4
                /* readyState 状态不意味是错误，只是意味着数据还没有完全的响应好
                    if (xhr.readyState == 4) {
                        resolve(xhr.responseText);
                    }else{
                        reject(xhr.statusText);
                    }
                */
                if (xhr.readyState == 4) {
                    resolve(xhr.responseText);
                }
            }
            /* 单独来监听错误的处理 */
            xhr.onerror = function () {
                reject('网络出错');
            }

            xhr.send();

        });
    }

    // 点击btn 发送网络请求
    $('#btn').click(function () {
        let url = 'https://yw.52kfw.cn/api/news/flist?pageSize=100&cate_id=%E7%A7%91%E6%8A%80%E5%85%B4%E5%9B%BD';
        var p1 = ajax1(url)
        p1.then(data => {
            console.log(JSON.parse(data));
        })
    })

</script>


</html>